<!--
 * @Author: 张帆 zhangfan@jxtech.net
 * @Date: 2024-12-16 11:47:41
 * @LastEditors: 张帆 zhangfan@jxtech.net
 * @LastEditTime: 2024-12-16 11:50:35
 * @FilePath: /vite-ts-vue3/src/views/xiaozhi/3.使用引号来监听嵌套值/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div @click="handleChangeName">测试</div>
</template>
<script setup lang='ts'>
import { ref,reactive, watch} from 'vue'

const userInfo = reactive({
    detail:{
        name:'王大冶'
    },
    job:'前端开发',
    age:16
})

// 只监听name的变化, 不要监听对象的所有属性变化
watch(()=> userInfo.detail.name,()=>{
 console.log('name发生变化了')
})

// 在选项 API 中，我们可以使用引号来监听嵌套值：
// <script>
// export default {
//   props: {
//     userInfo: Object
//   },
//   watch: {
//     'userInfo.detail.name' () {
//       console.log('name 发生变化了!')
//     }
//   }
// }
// </script>

const handleChangeName = () => {
    userInfo.detail.name = '王小虎'
}
</script>
<style scoped lang='scss'>
</style>